<script setup>

import { use } from "echarts/core";
import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import VChart, { THEME_KEY } from "vue-echarts";
import { watch } from "vue";

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  BarChart,
  CanvasRenderer,
  GridComponent
]);

const headerStyle = {
  borderBottom: "none",
  fontSize: "18px",
};

const props = defineProps({
  data: []
})



const buildBmiOption = (data) => {
  let serieData = [];
  for (let p in data) {
    if (p == "bestRate") {
      serieData.push({ value: data[p], name: "正常" });
    } else if (p == "wellRate") {
      serieData.push({ value: data[p], name: "超重" });
    } else if (p == "passRate") {
      serieData.push({ value: data[p], name: "低体重" });
    } else if (p == "noPassRate") {
      serieData.push({ value: data[p], name: "肥胖" });
    }
  }
  bmiPieOption.series[0].data = serieData;
};

watch(() => props.data, (newVal) => {
  let bmiData = !newVal ? [] : newVal;
  buildBmiOption(bmiData.value);
}, { immediate: true, deep: true })
</script>
<template>
  <a-card title="体重BMI" style="margin-top: 16px" :header-style="headerStyle">
    <v-chart :option="bmiPieOption" autoresize class="basechart"></v-chart>
  </a-card>
</template>